<template>
  <div class="overflow-auto">
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
  </div>
</template>

<script setup lang="jsx">
const props = defineProps({
  data: { type: Array, default: () => [] },
})

const tableRef = ref()

watch(
  () => props.data,
  val => {
    tableRef.value.reloadData(val)
        tableOptions.pagerConfig.total = val?.length||0;
  }
)

const tableOptions = reactive({
  pagerConfig: { pageSize: 1000,total:0 },
  height: '100%',
  round: true,
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { fixed: 'left', width: 50, title: '编号', field: 'id' },
    {
      fixed: 'left',
      title: '渠道名称',
      width: 120,
      field: 'channel_name',
    },
    { title: '时效(天)', width: 100, field: 'time_limit' },
    //   {
    //   title: "发货仓",
    //   width: 100,
    //   field: "warehouse_name",
    // },
    // {
    //   title: "区域",
    //   width: 100,
    //   field: "regions",
    // },
    {
      title: '限制尺寸/cm',
      width: 125,
      field: 'uni_max_lwh',
    },
    {
      title: '是否抛货/抛货系数',
      width: 200,
      field: 'count_reason',
      slots: {
        default: ({ row }) => <div>{row.count_reason || '-'}</div>,
      },
    },
    { title: '产品重量(包裹重)kg', width: 200, field: 'package_weight' },
    {
      title: '产品尺寸(包裹)',
      width: 200,
      slots: {
        default: ({ row }) => (
          <div>
            {row.length || '-'}*{row.width || '-'}*{row.height || '-'}
          </div>
        ),
      },
    },
    { title: '头程运费/CNY', width: 200, field: 'initial_freight' },
    { title: '尾程运费/CNY', width: 200, field: 'tail_freight' },
    { title: '采购价格/CNY', width: 200, field: 'product_cost' },
    { title: '建议售价/CNY', width: 200, field: 'selling_price' },
    {
      title: '是否可发',
      width: 200,
      field: 'is_availability',
      slots: {
        default: ({ row }) => (
          <div>
            {row.is_availability ? '是' : '否'}
            {row.unissued_reason}
          </div>
        ),
      },
    },
  ],
})
</script>
